<template>
    <div>
        <!-- 大堆箱提箱-分页 火车 -->
        <base-list ref="heapCarTR" :condition="condition" :datas.sync="heapCarTR" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="110px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="箱主">
                            <autoSearchCustom v-model="condition['search_EQ_ownerId']" :isOwner="true"></autoSearchCustom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="尺寸">
                            <autoSearchSize v-model="condition['search_EQ_containerSize']"></autoSearchSize>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="空重">
                            <el-select v-model="condition['search_EQ_ifHeavy']" placeholder="请选择"
                                       clearable>
                                <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="计划状态">
                            <el-select v-model="condition['search_EQ_planStatus']" placeholder="请选择"
                                       clearable>
                                <el-option v-for="[key, val] in _dictPlanStatus" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-button class="ml-110" icon="el-icon-search" type="primary" @click="loadData">查 询</el-button>
                        <excel-import ref="excel" :isImport="false" code="TRHEAP" @getUploadData="handleImport"></excel-import>
                        <el-button @click="handleExport">导出Excel</el-button>

                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="heapCarTR" border stripe max-height="500" >
                <el-table-column fixed="left" prop="id" label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index+1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75">
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75">
                </el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerNum" label="箱数"  min-width="75"></el-table-column>
                <!-- <el-table-column prop="cargoName" label="货名"  min-width="75"></el-table-column> -->
                <el-table-column prop="stratStationName" label="发站"  min-width="120"></el-table-column>
                <el-table-column prop="endStationName" label="到站"  min-width="120"></el-table-column>
                <el-table-column prop="ownerName" label="箱主"  min-width="160"></el-table-column>
                <el-table-column prop="planNo" label="计划编号"  min-width="140">
                    <template slot-scope='scope'>
                        <a style="color:blue" @click="handleClick(scope.row)">{{ scope.row.planNo }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="计划状态"  min-width="120">
                    <template slot-scope="scope">
                        {{scope.row.status | _filterPlanStatus}}
                    </template>
                </el-table-column>
                <el-table-column prop="createDateTime" label="创建时间" width="160" ></el-table-column>
                <el-table-column prop="entrustNo" label="委托编号" width="120" ></el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="100">
                    <template slot-scope="scope">
                        <el-button size="small" type="text"
                                   @click="handleSetImport(scope.row)">导入箱
                        </el-button>
                        <!-- <el-button size="small" type="text"
                                   @click="handleCanCel(scope.row)">取消作业
                        </el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </base-list>
        <cancel-job ref="cancelJob" @loadData="loadData"></cancel-job>
        <el-dialog title="计划详情" :visible.sync="dialogForm" width="800px">
            <el-button size="small" type="primary" @click="handleWorkCancel" style="margin-bottom:10px">
                取消作业
            </el-button>
            <el-table :data="containerTable" border stripe max-height="500" @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed="left" prop="id" width="55"></el-table-column>
                <el-table-column prop="groupNo" label="配组号"  min-width="90"></el-table-column>
                <el-table-column prop="jobStatus" fixed="left" label="作业状态"  min-width="105">
                    <template slot-scope="scope">
                        {{ scope.row.jobStatus | _filterJobStatus }}
                    </template>
                </el-table-column>
                <el-table-column prop="carNo" label="车号"  min-width="90"></el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="stratStationName" label="发站"  min-width="100"></el-table-column>
                <el-table-column prop="endStationName" label="到站"  min-width="100"></el-table-column>
                <el-table-column prop="ownerName" label="箱主"  min-width="120"></el-table-column>
                <el-table-column prop="cargoName" label="货名"  min-width="90"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import ExcelImport from '@/components/excel/import'
    import { heapCar,heapImportContainer,heapCancelJob2 } from '@/api/containerJob/containerJob'
    import cancelJob from './dialogs/cancelJob'
    import dateSlot from '@/components/date/dateSlot'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import { getJobPlanContainerTable } from "@/api/jobPlan/jobPlan";
    import { newExportExcel } from "@/utils/newExport";
    import {ifHeavyType,tradeType,jobStatus} from "../../../assets/dict";
    export default {
        name: "heapCarTR",
        components: {
            dateSlot,
            cancelJob,
            ExcelImport,
            autoSearchCustom,
            autoSearchSize
        },
        data() {
            return {
                pageSearch: heapCar,   //查询接口名
                condition: {
                    search_EQ_transportMode: 'TR',
                    search_EQ_planStatus:'NOOPERATE'
                }, // 查询条件
                heapCarTR: [], // table数组
                setImportId:'',
                containerTable:[],
                dialogForm:false,
                workSelect:[],
                planNo:null,
            }
        },
        mounted() {
            this.loadData('first')
        },
        methods: {
            loadData(val) {
                if (val === undefined) {
                    this.$emit('changeInfo')
                }
                this.$refs.heapCarTR.loadData()
            },
            // 取消作业
            handleCanCel(item) {
                this.$refs.cancelJob.id = item.planNo
                this.$refs.cancelJob.condition['containerNo'] = item.containerNo
                this.$refs.cancelJob.condition['id'] = item.id
                this.$refs.cancelJob.isTr = true
                this.$refs.cancelJob.loadData()
                this.$refs.cancelJob.dialogForm = true
            },
            handleSetImport(item) {
                this.setImportId = item.planNo
                this.$refs.excel.handleClick()
            },
            handleImport(item){
                // todo 导入箱操作
                let container=[]
                for(let i=0;i<item.length;i++){
                    container.push({
                        groupNo:item[i].groupNo,
                        containerNo:item[i].containerNo,
                        wagonNo:item[i].wagonNo,
                    })
                }
                heapImportContainer(this.setImportId,{container}).then(res=>{
                    this.$message({ message: '导入成功!', type: 'success' })
                    this.loadData()
                })
            },
            handleClick(item){
                let params={
                    // search_EQ_planType: '',
                    // search_EQ_transportMode: 'TR',
                    search_EQ_planNo: item.planNo,
                    iDisplayStart : 0,
                    iDisplayLength :  999 // 判断是否对列表分页
                }
                this.planNo=item.planNo
                getJobPlanContainerTable(params).then(res=>{
                    this.containerTable=res.data.aaData[0].container
                    this.dialogForm=true
                })
            },
            handleSelectionChange(val){
                console.log(val);
                this.workSelect=JSON.parse(JSON.stringify(val))
            },
            // 批量取消作业
            handleWorkCancel(){
                if(this.workSelect.length>0){
                    let data={
                        container:this.workSelect
                    }
                    heapCancelJob2(this.planNo,data).then(res=>{
                        this.$message({message:'取消成功!',type:'success'})
                        this.dialogForm=false
                    })
                }else{
                    this.$message({message:'请先选择一条数据!',type:'error'})
                }
            },
            handleExport(){
                let map = new Map();
                map.set('containerType','箱型')
                map.set('containerSize','尺寸')
                map.set('ifHeavy','空重')
                map.set('tradeType','内外贸')
                map.set('containerNum','箱数')
                map.set('stratStationName','发站')
                map.set('endStationName','到站')
                map.set('ownerName','箱主')
                map.set('planNo','计划编号')
                map.set('status','计划状态')
                map.set('createDateTime','创建时间')
                map.set('entrustNo','委托编号')
                let params = this.$assist.copySearchConditions(this.condition)
                params.iDisplayLength=99999
                heapCar(params).then(res => {
                    let exportRecords = [];
                    let exportArr = res.data.aaData;
                    exportArr.forEach(record => {
                        let exportRecord = {};
                        for (let [key, value] of map.entries()) {
                            if (key === "ifHeavy") {
                                record[key] = ifHeavyType.get(record[key]);
                            }
                            if (key === "tradeType") {
                                record[key] = tradeType.get(record[key]);
                            }
                            if (key === "jobStatus") {
                                record[key] = jobStatus.get(record[key]);
                            }
                            exportRecord[value] = record[key];
                        }
                        exportRecords.push(exportRecord);
                    });
                    newExportExcel("火车大堆箱提箱", exportRecords);
                })
            }
        },
        watch:{
            dialogForm(bool){
                if(!bool){
                    this.workSelect=[]
                    this.planNo=null
                }
            }
        }
    }

</script>

<style>


</style>
